<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
            <el-row>
                <el-button type="primary" size="default" @click="handleAdd">新建</el-button>
                <el-button type="danger" @click="deleteBatches" class="marginRB10">批量删除</el-button>
            </el-row>
            </div>
            <div class="item">
            <el-table 
                v-loading="listLoading" 
                ref="dataList" 
                :data="menuList" 
                style="margin-bottom: 20px;" border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
                @selection-change="handleSelectionChange"
                tooltip-effect="dark">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                <el-table-column prop="title" label="优惠券名称"></el-table-column>
                <el-table-column prop="type" label="优惠券类型">
                    <template slot-scope="{row}">
                        {{row.type === 1 ? '满减' : '折扣'}}
                    </template>
                </el-table-column>
                <el-table-column prop="threshold" label="优惠内容">
                    <template slot-scope="{row}">
                        <p v-if="row.type === 1">
                            <span>{{ row.threshold ? '满' : '无门槛' }}</span>{{ row.threshold ? row.threshold : '' }}&nbsp;&nbsp;&nbsp;&nbsp;减{{ row.reduce }}
                        </p>
                        <p v-else>
                            <span>{{ row.threshold ? '满' : '无门槛' }}</span>{{ row.threshold ? row.threshold : '' }}&nbsp;&nbsp;&nbsp;&nbsp;打{{ row.reduce }}折
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间"></el-table-column>
                
                <el-table-column label="操作" prop="date" width="300">
                    <template slot-scope="scope">
                        <el-button
                            icon="el-icon-edit"
                            plain
                            size="small"
                            type="primary"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            icon="el-icon-edit"
                            plain
                            size="small"
                            type="danger"
                            @click="handleDel(scope.row)"
                        >删除
                        </el-button>
                        
                    </template>
                </el-table-column>
    
            </el-table>
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.perPage"
                @pagination="getList"
            />
            </div>
        </el-card>

        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="30%"
            :close-on-click-modal="false"
            @close="handleDialogClose">
            <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                <el-form-item label="优惠券类型" prop="name">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1" border>满减券</el-radio>
                        <el-radio :label="2" border>折扣券</el-radio>
                    </el-radio-group>
                </el-form-item>
                
                <el-form-item label="优惠券名称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入优惠券名称"></el-input>
                </el-form-item>
                <el-form-item label="优惠内容" prop="threshold1">
                    <el-radio-group v-model="form.threshold1" class="radioBox">
                        <el-radio :label="1">
                            <el-input placeholder="请输入" v-model="form.threshold">
                                <template slot="append">豆</template>
                            </el-input>
                            <span v-if="form.type === 1">，减</span>
                            <span v-else>，打</span>
                            <el-input placeholder="请输入" v-model="form.reduce1">
                                <template slot="append"  v-if="form.type === 1">豆</template>
                                <template slot="append" v-else>折</template>
                            </el-input>
                        </el-radio>
                        <el-radio :label="0">
                            <span>无门槛，减</span>
                            <el-input placeholder="请输入" v-model="form.reduce2">
                                <template slot="append"  v-if="form.type === 1">豆</template>
                                <template slot="append" v-else>折</template>
                            </el-input>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用券时间" prop="expire_day">
                    <span>领券后</span>
                    <el-input class="effect" placeholder="立即生效" disabled></el-input>
                    <span>有效期</span>
                    <el-input v-model="form.expire_day" placeholder="">
                        <template slot="append">天</template>
                    </el-input>
                </el-form-item>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 撤销审核 -->
        <el-dialog
            :visible.sync="deleteDialogVisible"
            title="删除"
            width="435px"
        >
            <span style=""><em style="font-style: normal; color: red">确定删除该优惠券吗？</em></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
  
<script>
  import {accompanyCoupon, couponSave, couponUpdate, couponDel} from '@/api/playManagement'
  
    export default {
        data() {
        return {
            visible: false,
            title: '',
            banIpDialogVisible: false,
            deleteDialogVisible: false,
            options: [
                {
                    id: 0,
                    label: '审核中'
                },
                {
                    id: 1,
                    label: '审核通过'
                },
                {
                    id: 2,
                    label: '审核拒绝'
                }
            ],
            skillList: [],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                perPage: 10,
                nickname: undefined,
                user_id: undefined,
                name: undefined,
                status: undefined //审核状态0:审核中1:审核通过2:审核拒绝
            },
            menuList: [],
            dialogFormVisible: false,
            dialogStatus: '',
            titleMap: {
                update: '编辑',
                create: '增加'
            },
            form: {
                type: 1, //1 满减 2 折扣
                title: undefined,
                threshold: undefined, //条件 0为无门槛 其它为具体M豆
                threshold1: undefined,
                reduce: undefined, //具体优惠多少豆
                expire_day: undefined, //0 永远有效
            },
            rules: {
                type: [{required: true, message: '请选择优惠券类型', trigger: 'blur'}],
                title: [{required: true, message: '请输入优惠券名字', trigger: 'blur'}], //
                threshold1: [{required: true, message: '请选择并输入优惠内容', trigger: 'blur'}],
                reduce: [{required: true, message: '请输入折扣或满减豆', trigger: 'blur'}],
            },
            row_status: undefined,
            selectionList: [],
            ids: []
        }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] =
                    this.listQuery[key] === "" ? undefined : this.listQuery[key];
                }
                accompanyCoupon(this.listQuery).then(({data: {data, total}}) => {
                    data.map(item => {
                        if(item.threshold === 0) {
                            item.threshold1 = 0
                            item.threshold = undefined
                            item.reduce2 = this.form.reduce
                        }else {
                            item.threshold1 = 1
                            item.reduce1 = item.reduce
                        }
                    })
                    this.menuList = data
                    this.total = total
                    this.listLoading = false
                })
            },
            handleCouponDel(data) {
                couponDel(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.deleteDialogVisible = false
                        this.getList()
                    }
                })
            },
            deleteBatches() {
                
                if(!this.selectionList.length) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的优惠券'
                    })
                    return
                }else {
                    this.ids = []
                    this.selectionList.map((item) => {
                        this.ids.push(item.id)
                    })
                    this.deleteDialogVisible = true
                }
                
            },
            handleDel(row) {
                this.ids = [row.id]
                this.deleteDialogVisible = true
            },
            handleConfirmDel() {
                this.handleCouponDel({
                    ids: this.ids
                })
            },
            postAbilityVerify(data) {
                abilityVerify(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.banIpDialogVisible = false
                        this.getList()
                    }
                })
            },
            postAbilityCancel(data) {
                abilityCancel(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.deleteDialogVisible = false
                        this.getList()
                    }
                })
            },
            confirmBanIp() {
                this.$refs['form'].validate(async valid => {
                    if (valid) {
                        this.postAbilityVerify(this.form)
                    }
                })
            },
            handleEdit(row) {
                this.title = '编辑'
                this.form = JSON.parse(JSON.stringify(row))
                
                this.visible = true
            },
            handleConfirm() {
                this.$refs['form'].validate(async valid => {
                    if (valid) {
                        
                        if(this.form.threshold1 === 0) {
                            this.form.threshold = 0
                            if(!this.form.reduce2) {
                                this.$message({
                                    type: 'warning',
                                    message: '请输入满减豆或者折扣'
                                })
                                return false
                            }else {
                                this.form.reduce = this.form.reduce2
                            }
                        }else if(this.form.threshold1 === 1) {
                            if(!this.form.threshold) {
                                this.$message({
                                    type: 'warning',
                                    message: '请输入优惠内容'
                                })
                                return false
                            }else {
                                if(!this.form.reduce1) {
                                    this.$message({
                                        type: 'warning',
                                        message: '请输入满减豆或者折扣'
                                    })
                                    return false
                                }else {

                                    this.form.reduce = this.form.reduce1
                                }
                            }
                        }
                        if(!this.form.expire_day) {
                            this.form.expire_day = 0
                        }
                        if(this.title === '新建') {
                            this.handleCouponSave(this.form)
                        }else {
                            this.handleCouponUpdate(this.form)
                        }
                    }
                })
                
            },
            handleCouponSave(data) {
                couponSave(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.visible = false
                        this.getList()
                    }
                })
            },
            handleCouponUpdate(data) {
                couponUpdate(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.visible = false
                        this.getList()
                    }
                })
            },
            handleDialogClose() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields() // 清除整个表单
                    this.$refs['form'].clearValidate() // 清除整个表单的校验
                }
                this.form = {
                    id: undefined,
                    type: 1, //1 满减 2 折扣
                    title: undefined,
                    threshold: undefined, //条件 0为无门槛 其它为具体M豆
                    reduce: undefined, //具体优惠多少豆
                    expire_day: undefined, //0 永远有效
                    threshold1: undefined,
                }
            },
            handleAdd() {
                this.title = '新建'
                this.form = {
                    id: undefined,
                    type: 1, //1 满减 2 折扣
                    title: undefined,
                    threshold: undefined, //条件 0为无门槛 其它为具体M豆
                    reduce: undefined, //具体优惠多少豆
                    expire_day: undefined, //0 永远有效
                    threshold1: undefined,
                }
                this.visible = true
            },
            handleSelectionChange(list) {
                this.selectionList = list
            },
        }
    }
</script>
<style scoped lang="scss">
  [v-cloak] {
    display: none;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  
  .clearfix:after {
    clear: both
  }
  
  .box-card {
    width: 100%;
  }
  
  .demo-form-inline {
    float: right;
  }
  ::v-deep {
    .el-card__header {
        padding-bottom: 0;
    }
    .el-input-group{
        width: 45%;
    }

    .radioBox{
        .el-radio{
            display: flex;
            align-items: center;
            margin-bottom: 15px;
    
            .el-radio__label{
                display: flex;
                align-items: center;
    
                span{
                    padding-right: 10px;
                    padding-left: 10px;
                }
            }
        }
    }
    .effect{
        width: 150px;
    }
  } 
</style>
  